<template>
  <view>
    <view v-if="Token" class="startpage-container">
      <view class="loader"></view>
    </view>
    <template v-else>
      <swiper
        :current="current"
        :interval="2000"
        autoplay
        circular
        class="hb-w-full hb-h-screen"
        @change="handleSwiperChange"
      >
        <template v-for="(item, index) in swiperList" :key="index">
          <swiper-item>
            <image class="hb-w-full hb-h-full" mode="aspectFill" :src="item" />
          </swiper-item>
        </template>
      </swiper>
      <view class="hb-w-full hb-fixed hb-left-0 hb-bottom-15 hb-z-10">
        <view class="hb-w-full hb-flex hb-items-center hb-justify-center hb-gap-2 hb-pb-7">
          <template v-for="(item, index) in swiperList" :key="index">
            <view
              class="hb-h-2 hb-rounded-full hb-transition-all hb-duration-300"
              :class="[current === index ? 'hb-w-6' : 'hb-w-2']"
              :style="{ backgroundColor: current === index ? '#2878FF' : 'rgba(1,99,255, .2)' }"
            ></view>
          </template>
        </view>
        <TmButton
          v-if="!startPageOptions"
          block
          :margin="[32, 0]"
          color="primary"
          font-color="#fff"
          :height="88"
          :font-size="32"
          :round="16"
          label="开启专属AI助手"
          @click="handleToHome"
        />
      </view>
    </template>
  </view>
</template>

<script lang="ts" setup>
  /* startPage 启动页 */
  import { getAppShareLog } from '@/api';
  import { TabbarPageEnum } from '@/enums/PageEnum';
  import { useEnv } from '@/hooks/useEnv';
  import { StartPage } from '@/router/types/modules';
  import { Pages } from '@/router/types/pages';
  import { useAppStore } from '@/store/modules/app';
  import { useUserStore } from '@/store/modules/user';
  import { isJSON, urlConvertToName } from '@/utils/is';
  import { updateManager } from '@/utils/updateManager';
  import { isEmpty, isString } from 'lodash-es';

  interface ShareLogQueryInter {
    id: number;
    messageId: string;
    userId: number;
  }

  const { Token } = useUserStore();
  const { envVersion } = useEnv();
  const { isPc } = useAppStore();

  const current = ref(0);

  const swiperList = [
    'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/saas-ai/guide_1.png',
    'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/saas-ai/guide_2.png',
    'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/saas-ai/guide_3.png',
    'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/saas-ai/guide_4.png',
  ];

  function handleSwiperChange(e: any) {
    current.value = e.detail.current;
  }

  const handleToHome = () => {
    switchTab(TabbarPageEnum.BASE_HOME);
  };
  const startPageOptions = ref<StartPage>();

  customOnload<'startPage'>(async (op) => {
    if (!isPc() && envVersion !== 'develop') {
      await updateManager();
    }
    console.log('startPage', op);

    if (!op || isEmpty(op)) {
      Token && handleToHome();
      return;
    }

    startPageOptions.value = op;
    let path = '';
    let query = {};
    try {
      const res = await getLoadOptions(op);
      path = res.path;
      query = res.query;
    } catch (error) {}

    if (!path) return handleToHome();
    if (path === TabbarPageEnum.BASE_HOME) return switchTab(TabbarPageEnum.BASE_HOME);
    if (path === TabbarPageEnum.BASE_CONTACT) return switchTab(TabbarPageEnum.BASE_CONTACT);
    if (path === TabbarPageEnum.BASE_MINE) return switchTab(TabbarPageEnum.BASE_MINE);

    reLaunchRouter(path, query as Recordable);
  });

  function reLaunchRouter(path: string, query: Recordable = {}) {
    const routerName = urlConvertToName(path);
    Pages[routerName] ? reLaunch({ name: routerName as any, options: query }) : handleToHome();
  }

  async function getLoadOptions(op: StartPage): Promise<{ path: string; query: Recordable }> {
    // scene={id} 分享日志方式获取参数
    // 参数格式: { path: string, query: JSON String ==> ShareLogQueryInter  }
    if (op.scene) {
      const res = await getAppShareLog(op.scene);
      return {
        path: res.path,
        query: (isJSON(res.query) || {}) as ShareLogQueryInter,
      };
    }
    // 路径参数形式 op = { path: string, query: JSON String }
    let query: Recordable = isString(op.query) ? isJSON(op.query) || {} : {};
    // query && path 直接返回op对象
    if (query && op.path) return Promise.resolve({ query: query, path: op.path });
    // 有path 无query的情况
    if (op.path) {
      // 若path后有拼接其他参数, 冗余到query中
      const { path, ...lastArg } = op;
      return { path, query: { ...lastArg } };
    }
    // 有query 无path 忽略query
    return Promise.reject();
  }
</script>

<style lang="scss" scoped>
  @use 'sass:list';
  $colors: rgba(337, 84, 48, 0.75) rgba(160, 50, 48, 0.75) rgba(190, 61, 65, 0.75)
    rgba(41, 82, 52, 0.75);
  $size: 2.5em;
  $thickness: 0.5em;

  // Calculated variables.
  $lat: calc(($size - $thickness) / 2);
  $offset: $lat - $thickness;
  .startpage-container {
    width: 100vw;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .loader {
      width: $size;
      height: $size;
      position: absolute;
      top: calc(50% - $size / 2);
      left: calc(50% - $size / 2);
      transform: rotate(165deg);

      &:before,
      &:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: $thickness;
        height: $thickness;
        border-radius: calc($thickness / 2);
        transform: translate(-50%, -50%);
      }

      &:before {
        animation: before 2s infinite;
      }

      &:after {
        animation: after 2s infinite;
      }
    }

    @keyframes before {
      0% {
        width: $thickness;
        box-shadow: $lat (-$offset) list.nth($colors, 1), (-$lat) $offset list.nth($colors, 3);
      }
      35% {
        width: $size;
        box-shadow: 0 (-$offset) list.nth($colors, 1), 0 $offset list.nth($colors, 3);
      }
      70% {
        width: $thickness;
        box-shadow: (-$lat) (-$offset) list.nth($colors, 1), $lat $offset list.nth($colors, 3);
      }
      100% {
        box-shadow: $lat (-$offset) list.nth($colors, 1), (-$lat) $offset list.nth($colors, 3);
      }
    }

    @keyframes after {
      0% {
        height: $thickness;
        box-shadow: $offset $lat list.nth($colors, 2), (-$offset) (-$lat) list.nth($colors, 4);
      }
      35% {
        height: $size;
        box-shadow: $offset 0 list.nth($colors, 2), (-$offset) 0 list.nth($colors, 4);
      }
      70% {
        height: $thickness;
        box-shadow: $offset (-$lat) list.nth($colors, 2), (-$offset) $lat list.nth($colors, 4);
      }
      100% {
        box-shadow: $offset $lat list.nth($colors, 2), (-$offset) (-$lat) list.nth($colors, 4);
      }
    }
  }
</style>
